<template>
  <view>
	<my-search></my-search>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <view v-for="item,index in cateList" 
		:key="index" 
		:class="{active:index == flag}" 
		@click="changstatus(index)"
		class="left-scroll-view-item">{{item.cat_name}}
		</view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
			<view class="cate-lv2" v-for="item2,index2 in cateLevel2" :key="index2">
			    <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
				 <!-- 动态渲染三级分类的列表数据 -->
				    <view class="cate-lv3-list">
				      <!-- 三级分类 Item 项 -->
				      <view @click="jumpgoodslist(item3.cat_id)" class="cate-lv3-item" v-for="item3,index3 in item2.children" :key="index3">
				        <!-- 图片 -->
				        <image :src="item3.cat_icon"></image>
				        <!-- 文本 -->
				        <text>{{item3.cat_name}}</text>
				      </view>
				    </view>
			</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				flag:0,
				wh:0,
				cateList:[],
				// 二级分类列表
				cateLevel2: []
			};
		},
		 onLoad() {
		      // 获取当前系统的信息
		      const sysInfo = uni.getSystemInfoSync()
		      // 为 wh 窗口可用高度动态赋值
		      this.wh = sysInfo.windowHeight-50
			  
			  this.getcatelist()
		},
		methods:{
			// 点击跳转到商品分类页面的函数
			jumpgoodslist(catid){
				uni.navigateTo({
					url:"/pac/goods_list/goods_list?catid="+catid
				})
			},
			// 修改高亮的函数 修改右侧子分类的数据
			changstatus(index){
				this.flag = index
				//改右侧显示的分类
				this.cateLevel2 = this.cateList[index].children
			},
			// 获取分类数据
			async getcatelist(){
				let list = await uni.$http.get('/api/public/v1/categories')
				console.log(list,"-=-=-=-=-=")
				this.cateList = list.data.message
				// 把第一个一级分类里面的二级分类取出来 展示在页面上
				this.cateLevel2 = this.cateList[0].children
				console.log(this.cateLevel2,"-=-=-=-=-=-123")
			}
		}
	}
</script>

<style lang="scss">
	
	.scroll-view-container {
	  display: flex;
	
	  .left-scroll-view {
	    width: 120px;
	
	    .left-scroll-view-item {
	      line-height: 60px;
	      background-color: #f7f7f7;
	      text-align: center;
	      font-size: 12px;
	
	      // 激活项的样式
	      &.active {
	        background-color: #ffffff;
	        position: relative;
	
	        // 渲染激活项左侧的红色指示边线
	        &::before {
	          content: ' ';
	          display: block;
	          width: 3px;
	          height: 30px;
	          background-color: #c00000;
	          position: absolute;
	          left: 0;
	          top: 50%;
	          transform: translateY(-50%);
	        }
	      }
	    }
	  }
	}
	
	.cate-lv2-title {
	  font-size: 12px;
	  font-weight: bold;
	  text-align: center;
	  padding: 15px 0;
	}
	
	.cate-lv3-list {
	  display: flex;
	  flex-wrap: wrap;
	
	  .cate-lv3-item {
	    width: 33.33%;
	    margin-bottom: 10px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	
	    image {
	      width: 60px;
	      height: 60px;
	    }
	
	    text {
	      font-size: 12px;
	    }
	  }
	}

</style>
